Blueprint: FCM Push Notification App
Overview
This document outlines the plan for creating a Flutter application that can receive Firebase Cloud Messaging (FCM) push notifications. The user interface will be a modern interpretation of the provided screenshot, and it will include the full process for handling notifications in both the foreground and background, using mocked data for the API.
Features & Design
Core Functionality
- FCM Integration: The app will be fully integrated with Firebase Cloud Messaging.
- Token Generation: It will generate and display an FCM token, which will serve as the "API KEY".
- Foreground Notifications: The app will handle incoming notifications when it is active and in the foreground.
- Background Notifications: It will process notifications when the app is in the background or terminated.
- Notification Permissions: The app will request the necessary notification permissions from the user.
- Mock API: A test submission form will allow users to simulate sending a notification.
- Notification History: The app will store and display a history of received notifications.
UI & Design
- Modern UI: The UI will be built using Material 3 principles for a clean and modern aesthetic.
- Layout: The layout will be inspired by the screenshot, with cards for displaying the API key, API URL, and the test form.
- Color Scheme: A color scheme based on
Colors.deepPurple will be used to create a visually appealing look.
- Typography:
google_fonts will be used for custom, modern typography.
- Interactivity: Buttons will have clear feedback, and text fields will be well-styled.
- How to Use Dialog: A dialog will provide instructions on how to use the app.
- History Screen: A separate screen will display the notification history.
Plan
-
Setup Firebase & Dependencies:
- Add
firebase_core, firebase_messaging, provider, google_fonts, shared_preferences, and intl to the pubspec.yaml file.
- Configure the Android project to use Firebase by updating the Gradle files.
-
Implement FCM Service:
- Create a service to handle FCM token retrieval.
- Set up background and foreground message handlers.
- Implement logic to request notification permissions.
- Store notification history using
shared_preferences.
-
Develop the User Interface:
- Create a
ThemeProvider to manage light and dark modes.
- Build the main screen with a layout similar to the provided image, including sections for the API Key, API URL, and a test form.
- Create a
HistoryScreen to display the notification history.
- Create a
HowToUseDialog to display instructions.
- Use a
ChangeNotifier to manage the application's state (e.g., the FCM token, form inputs, and notification history).
-
Connect UI to FCM Service:
- Display the FCM token in the "Your API KEY" section.
- Implement the "SUBMIT" button to trigger a mock notification.
- Implement the "REFRESH API KEY" button to get a new FCM token.
- Load and display the notification history in the
HistoryScreen.
-
Finalize and Test:
- Ensure the app handles notifications correctly in all states (foreground, background, terminated).
- Verify that the UI is responsive and visually polished.